@use "sass:math";

// 公共样式类
@for $flex from 1 through 6 {
  .f#{$flex} {
    flex: $flex !important;
  }
}

@each $fd,
$value in (col: column, row: row, rerow: row-reverse, recol: column-reverse) {
  .fd-#{$fd} {
    flex-direction: $value !important;
  }
}

@each $align,
$value in (start: flex-start,
  center: center,
  end: flex-end) {
  .ai-#{$align} {
    align-items: $value;
  }
}

@each $justify,
$value in (sa: space-around,
  sb: space-between,
  center: center,
  start: flex-start,
  end: flex-end) {
  .jc-#{$justify} {
    justify-content: $value;
  }
}

@each $position in (fixed, relative, absolute) {
  .#{$position} {
    position: $position;
  }
}

@each $text in (center, left, right) {
  .text-#{$text} {
    text-align: $text;
  }
}

@for $i from 0 through 90 {

  @each $wrapper,
  $box in (top: top,
    bottom: bottom,
    left: left,
    right: right,
    width: width,
    height: height,
    mt: margin-top,
    mr: margin-right,
    mb: margin-bottom,
    ml: margin-left,
    pt: padding-top,
    pr: padding-right,
    pb: padding-bottom,
    pl: padding-left) {
    .#{$wrapper}-#{$i * 2} {
      #{$box}: #{$i * 2}#{if($i != 0, "rpx", "")};
    }
  }

  @if $i <=30 {

    @each $wrapper,
    $box in (br: border-radius,
      fs: font-size,
      m: margin,
      p: padding,
    ) {
      .#{$wrapper}-#{$i * 2} {
        #{$box}: #{$i * 2}#{if($i != 0, "rpx", "")};
      }
    }

    @if $i >5 {
      .lh-#{$i * 2} {
        line-height: #{$i * 2}rpx;
      }
    }
  }

  @if $i <=5 {
    .lh-#{$i} {
      line-height: $i;
    }
  }
}

@each $size in (20, 25, 30, 50, 70, 90, 100) {
  .br-#{$size}percent {
    border-radius: #{$size}#{"%"};
  }

  .width-#{$size}vw {
    width: #{$size}vw;
  }

  .width-#{$size}percent {
    width: #{$size}#{"%"};
  }

  .height-#{$size}vh {
    height: #{$size}vh;
  }

  .height-#{$size}percent {
    height: #{$size}#{"%"};
  }

  .top-#{$size}percent {
    top: #{$size}#{"%"};
  }

  .left-#{$size}percent {
    left: #{$size}#{"%"};
  }

  .bottom-#{$size}percent {
    bottom: #{$size}#{"%"};
  }

  .right-#{$size}percent {
    right: #{$size}#{"%"};
  }
}

@for $i from 1 to 10 {
  .opacity-0#{$i} {
    opacity: math.div($i, 10);
  }

  .fw-#{$i * 100} {
    font-weight: $i * 100;
  }
}


/* #ifndef APP-PLUS-NVUE  */
@each $position in (sticky, static) {
  .#{$position} {
    position: $position;
  }
}

@each $text in (justify) {
  .text-#{$text} {
    text-align: $text;
  }
}

@each $justify,
$value in (se: space-evenly,
  sa: space-around,
  sb: space-between,
  center: center,
  start: flex-start,
  end: flex-end) {

  @if($justify ==se) {
    .jc-#{$justify} {
      justify-content: $value;
    }
  }

  .js-#{$justify} {
    justify-self: $value;
  }

  .ji-#{$justify} {
    justify-items: $value;
  }
}

@each $align,
$value in (start: flex-start,
  center: center,
  end: flex-end,
  baseline: baseline) {
  @if $align ==baseline {
    .ai-#{$align} {
      align-items: $value;
    }
  }

  .as-#{$align} {
    align-self: $value;
  }

  .ac-#{$align} {
    align-content: $value;
  }
}

@each $size in (auto) {
  .width-#{$size} {
    width: $size;
  }

  .height-#{$size} {
    height: $size;
  }

  .mt-#{$size} {
    margin-top: $size;
  }

  .mr-#{$size} {
    margin-right: $size;
  }

  .mb-#{$size} {
    margin-bottom: $size;
  }

  .ml-#{$size} {
    margin-left: $size;
  }
}

/* #endif*/